<template>
    <h1>用户投资页面</h1>

    <table>
        <tr>
            <td>项目名称</td>
            <td>
                {{Info.I_Name  }}
            </td>
        </tr>

        <tr>
            <td>项目总金额</td>
            <td>
                {{Info.I_Budget  }}
            </td>
        </tr>

        <tr>
            <td>已投金额</td>
            <td>
                {{ Info.I_Receive }}
            </td>
        </tr>

        <tr>
            <td>剩余金额</td>
            <td>
                {{Info.I_Amount }}
            </td>
        </tr>

        <tr>
            <td>投资金额</td>
            <td>
                <input type="text" v-model="User_Invest.UI_Money"   >
            </td>
        </tr>

        <tr>
            <td>预计最高收益</td>
            <td>
                {{ Number(User_Invest.UI_Money)*0.06 }}
            </td>
        </tr>

        <tr>
            <td colspan="2">
                <input type="button" value="确认投资" @click="AddUserInvest">
            </td>
        </tr>

    </table>

</template>

<script setup lang="ts">
import { useRoute,useRouter } from 'vue-router';
import { ref,onMounted } from 'vue';
import axios from 'axios';
import {useStore} from '../../store/index.ts'

//创建仓库实例
const store = useStore();

//创建路由实例
const route = useRoute();
const router = useRouter();

//用于接收(反填)项目信息
const Info = ref({
    I_Name:"",
    I_Budget:0,
    I_Receive:0,
    I_Amount:0
})

const User_Invest = ref({
    UI_Money:'',
})


//alert(route.params.Iid);


//创建生命周期钩子函数
onMounted (() =>{
    axios({
        url:"http://localhost:53279/api/Invest/ServerInfo",
        method:"get",
        params:{
            Iid:route.params.Iid
        }
    })
    .then(function(res){
        console.log(res.data);
        Info.value = res.data;
    })
    .catch(function(err){
        console.log(err);
    })
})

//用户投资信息添加
const AddUserInvest = () =>{
    axios({
        url:"http://localhost:53279/api/Invest/AddUserInvest",
        method:"post",
        data:{
            I_Id:route.params.Iid,
            U_Id:store.UserId,
            UI_Money:User_Invest.value.UI_Money
        }
    })
    .then(function(res){
        if(res.data==1){
            alert("用户投资成功");
        }
        else{
            alert("用户投资失败");
            return;
        }
        router.push("/ShowUserInvers");
    })
    .catch(function(err){
        console.log(err);
    })
}


</script>